import { Component } from 'react'
import { Card, Layout, Menu } from 'antd';
import { FolderOutlined } from '@ant-design/icons';
import CurrentComponent from './RfBinViewConfig';

const { SubMenu } = Menu;
const { Content, Sider } = Layout;

const configs = [
    { id: "01", name: "内部配置", parentId: null },
    { id: "0101", name: "货位显示配置", parentId: "01" },
    { id: "0102", name: "收货配置", parentId: "01" },
    { id: "02", name: "预约配置", parentId: null },
    { id: "0201", name: "预约时间配置", parentId: "02" },
    { id: "03", name: "上架配置", parentId: null },
    { id: "04", name: "作业配置", parentId: null },
    { id: "05", name: "作业配置", parentId: null },
    { id: "06", name: "作业配置", parentId: null },
    { id: "07", name: "作业配置", parentId: null },
    { id: "08", name: "作业配置", parentId: null }
]

export default class Config extends Component {

    state = {
        currentComponent: require('./RfBinViewConfig')
    }

    generateMenu = (menus: Array<any>, parentId: string | null) => {
        const filterMenus = menus.filter((item) => item.parentId === parentId);
        return filterMenus.map((item) => {
            if (menus.some(x => x.parentId === item.id)) {
                return (
                    <SubMenu key={item.id} icon={<FolderOutlined />} title={item.name}>
                        {this.generateMenu(menus, item.id)}
                    </SubMenu>
                );
            } else {
                return <Menu.Item key={item.id}>{item.name}</Menu.Item>
            }
        });
    }

    render() {
        return (
            <Card title="配置中心" bordered={false} >
                <Layout style={{ height: '400px', background: "#fff" }}>
                    <Sider style={{
                        overflow: 'auto',
                        height: '100%',
                        position: 'relative',
                        backgroundColor: "#FFF"
                    }} width={250}>
                        <Menu mode="inline" theme="light">
                            {this.generateMenu(configs, null)}
                        </Menu>
                    </Sider>
                    <Content >
                    <CurrentComponent />
                    </Content>
                </Layout>
            </Card>
        )
    }
}
